<template>
  <div id="map" style="width: 1920px; height: 1080px"></div>
</template>

<script>
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
import surface_img from "@/assets/images/渐变图片.png";
import GS_PIPE_DISSOLVE2 from "./GS_PIPE_DISSOLVE2.json";

let viewer = null;

export default {
  name: "cesium",
  methods: {
    initMap() {
      let that = this;

      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2ZTgxOGNhZC03NThmLTQ0NzMtOTNlYS1kNmM3YzlmZDU3NTMiLCJpZCI6MTI1NTY3LCJpYXQiOjE2NzY5MDI0MzJ9.ulIEz3NCh2cMEBiHrqIuv9I6icn5KTMMnBdy2wassoM";
      viewer = new Cesium.Viewer("map", {
        // 配置项
        infoBox: false,
        animation: false, // 禁用动画控件
        timeline: false, // 禁用时间线控件
        homeButton: false, // 禁用Home按钮
        sceneModePicker: false, // 禁用场景模式选择器
        baseLayerPicker: false, // 禁用图层选择器
        navigationHelpButton: false, // 禁用帮助按钮
        fullscreenButton: false, // 禁用全屏按钮
        geocoder: false, // 禁用搜索框
        requestRenderMode: true, // 显示渲染
        maximumRenderTimeChange: Infinity,
        navigation: false,
      });
    },
    setView(x, y, z = 100000) {
      if (x instanceof Array || y instanceof Array) {
        viewer.camera.setView({
          destination: Cesium.Rectangle.fromDegrees(
            ...handleRectangleDegrees(x, y)
          ),
          duration: 0,
          complete: () => {},
        });
      } else {
        viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(x, y, z),
          duration: 0,
          complete: () => {},
        });
      }
    },
  },
  mounted() {
    console.log(GS_PIPE_DISSOLVE2);
    this.initMap();
    this.setView(119.9006141946, 32.9316860959); // 香港中心点
    let lineGeometry = [];
    GS_PIPE_DISSOLVE2.forEach((item) => {
      lineGeometry.push(
        new Cesium.GeometryInstance({
          geometry: new Cesium.PolylineGeometry({
            positions: Cesium.Cartesian3.fromDegreesArray(
              handleData(item.json_geometry.coordinates)
            ),
            width: 2,
          }),
          attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(
              new Cesium.Color(0 / 255, 185 / 255, 255 / 255, 1)
            ),
          },
        })
      );
    });
    let primitive_line_list = new Cesium.Primitive({
      geometryInstances: lineGeometry,
      appearance: new Cesium.PolylineMaterialAppearance({
        material: new Cesium.Material({
          fabric: {
            uniforms: {
              image: surface_img,
            },
            source: `
                    uniform vec4 color;

                    czm_material czm_getMaterial(czm_materialInput materialInput)
                    {
                        czm_material material = czm_getDefaultMaterial(materialInput);
                        vec2 st = materialInput.st;
                        float s = st.s;
                        float t = st.t;
                        vec4 colorImage = texture(image, vec2(fract(s), t));
                        material.diffuse = colorImage.rgb;
                        return material;
                    }
                `,
          },
        }),
      }),
    });
    viewer.scene.primitives.add(primitive_line_list);

    function handleData(data) {
      let arr = [];
      data.forEach((item) => {
        arr.push(item[0], item[1]);
      });
      return arr;
    }
  },
};
</script>
